import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import IncrButton from "./components/buttons/IncrButton.jsx";
import Game from "./components/checkerboard/Checkerboard.jsx";

function App() {

    return (
        <>
            <div>
                <a href="https://vite.dev" target="_blank">
                    <img src={viteLogo} className="logo" alt="Vite logo"/>
                </a>
                <a href="https://react.dev" target="_blank">
                    <img src={reactLogo} className="logo react" alt="React logo"/>
                </a>
            </div>

            <h1>Vite + React</h1>

            <div className="card">
                <h2>Incr Button Demo</h2>
                <IncrButton/>
            </div>

            <div className="game">
                <h2>Checkerboard Game</h2>
                <Game/>
            </div>

            <div>
                <p>
                Edit <code>src/App.jsx</code> and save to test HMR
                </p>
                <p className="read-the-docs">
                    Click on the Vite and React logos to learn more
                </p>
            </div>
        </>
    )
}

export default App;
